<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ page isELIgnored="false"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="description" content="人生就是一部小说,记录生活的点滴" />
    <meta name="keywords" content="记录生活,小说人说,分享你的生活动态,订阅他人的分享" />
    <script>
    window._time = [Date.now()];
    </script>
    <link rel="stylesheet" href="/faceb-cupt/css/reset.min.css" />
    <link rel="stylesheet" href="/faceb-cupt/css/personal_center.min.css" />
    <link rel="stylesheet" href="/faceb-cupt/util/font-awesome-3.2.1/css/font-awesome.min.css" />
    <style type="text/css">
    .poa {
        position: relative;
    }
    
    .personal-box {
        position: absolute;
        top: 53px;
        right: 0px;
        width: 108px;
        height: 80px;
        border-radius: 10px;
        background: #10d0d8;
    }
    
    .personal-box a {
        display: block; 
        margin: 0px auto;
        padding: 0;
        color: #fff;
        text-align: center;
        border-radius: 0;   
    }
    .personal-box a:hover{
        background: #fff;
        color: #10d0d8;
    }
    .hide{
        opacity: 0;
    }
   
    .trans{
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }
    .touxiang{
        width: 70px;
        height: 70px;
        border-radius: 50%;
    }
    </style>
    <script type="text/javascript" src="/faceb-cupt/js/lib/jq.js"></script>
    <title>我的资料</title>
</head>

<body>
    <div class="page-header clearfix">
        <h1 class="page-header-title pull-left">${u.u_info}</h1>
        <div class="page-header-personal pull-right poa js-header">
            <a href="javascript:void(0)" class="personal-photo">
                <span class="name">${u.u_name}</span>
                <img src="http://172.18.106.98:8080/faceb-cupt/userlogo/users/${u.u_id}" alt="test" />
            </a>
            <div class="personal-box hide trans">
                <a href="/faceb-cupt/tpl/profile" class="btn">我的资料</a>
                <a href="javascript:void(0)" class="btn">退出登陆</a>
            </div>
        </div>
    </div>
    <div class="page-aside">
        <ul class="navbar">
            <li>
                <a href="/faceb-cupt/tpl/index" class="home">
                    <i class="icon-home"></i>
                </a>
                <a href="javascript:void(0)" class="js-gocenter">
                    <i class="icon-user"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="page-content clearfix">
        <div class="p-left fl">
            <div class="imgcon">
               
                 <form class="send-btn" action="/faceb-cupt/userlogo/upload" method="post" accept="image/gif, image/jpeg" enctype="multipart/form-data" target="tmp">
                <img src="http://172.18.106.98:8080/faceb-cupt/userlogo/users/${u.u_id }" class="js-touxiang touxiang">
                <input type="file" class="file-input" name="file" id="js-uploadtx" style="display: none" />
            </form>
            </div>
            <p class="nick-name">${u.u_name}</p>
            <div class="my-index">
                <a href="javascript:void(0)" class="js-gocenter">我的动态</a>
            </div>
        </div>
        <div class="p-right fl">
            <div class="e-title">
                <span>基本资料</span>
                <a href="javascript:void(0)" class="js-edit">编辑</a>
            </div>
            <table class="info-table">
                <tr>
                    <td>昵称：</td>
                    <td>
                        <input type="text" class="disable js-nickname" value="${u.u_name}" />
                    </td>
                </tr>
                <tr>
                    <td>姓名：</td>
                    <td>
                        <input type="text" class="disable js-realname" value="${u.u_realname}">
                    </td>
                </tr>
                <tr>
                    <td>性别<span>:</span></td>
                    <td>
                        <input type="radio" class="disable" name="sex" value="woman" class="e-s disabled" />女
                        <input type="radio" class="disable" name="sex" value="man" checked="checked" class="e-s disabled" />男
                    </td>
                </tr>
                <tr>
                    <td>E-mail:</td>
                    <td>
                        <input type="text" class="disable js-email" value="${u.u_email}">
                    </td>
                </tr>
                <tr>
                    <td>手机：</td>
                    <td>
                        <input type="text" class="disable js-phone" value="${u.u_tel}">
                    </td>
                </tr>
                <tr>
                    <td>QQ:</td>
                    <td>
                        <input type="text" class="disable js-qq" value="${u.u_qq}"> </td>
                </tr>
                <tr>
                    <td>Blog:</td>
                    <td>
                        <input type="text" class="disable js-blog" value="${u.u_blog}"> </td>
                </tr>
                <tr>
                    <td class="sign">签名:</td>
                    <td>
                        <textarea class="slogan disable js-slogan" name="slogan" rows="10" cols="85" maxlength="200" placeholder="随便写点什么让大家认识你吧!" class="e-s disabled">${u.u_info}</textarea>
                    </td>
                </tr>
            </table>
            <div class="p-control">
                <a href="javascript:void(0)" class="js-save btn btn-primary">保存</a>
                <a href="javascript:void(0)" class="js-cancel btn btn-white">取消</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    var app = {
        info: {},
        init: function() {

            this.render();
            this.bindEvent();
        },
        render: function() {
            //init render
            $(".p-control").hide();
        },
        bindEvent: function() {
            var edit_btn = $(".js-edit");
            var info_table = $(".info-table");

            var save_btn = $(".js-save");
            var cancel_btn = $(".js-cancel");
            var header_btn=$(".js-header");

            header_btn.on("click", function(e) {
              $(".personal-box").toggleClass('hide');
            });


            edit_btn.on("click", function(e) {
                app.info = {
                    nickname: $(".js-nickname").val(),
                    realname: $(".js-realname").val(),
                    sex: $("input[name=sex]:checked").val(),
                    email: $(".js-email").val(),
                    phone: $(".js-phone").val(),
                    qq: $(".js-qq").val(),
                    blog: $(".js-blog").val(),
                    sign: info_table.find("textarea").val()
                };
                info_table.find("input").removeClass("disable");
                $(".js-email").addClass("disable");
                info_table.find("textarea").removeClass('disable');
                $(".p-control").fadeIn(200);


            });

            save_btn.on("click", function(e) {

                var sendData = {
                    name: $(".js-nickname").val(),
                    realname: $(".js-realname").val(),
                    sex: $("input[name=sex]:checked").val(),
                    email: $(".js-email").val(),
                    phone: $(".js-phone").val(),
                    qq: $(".js-qq").val(),
                    blog: $(".js-blog").val(),
                    info: info_table.find("textarea").val()
                };
                $.post('/faceb-cupt/dealcomplete', sendData, function(data, textStatus, xhr) {               
                        window.location.reload();
                });

            });


                //go center
                $(".js-gocenter").on("click",function(e){
                    var loginid=document.cookie.split("=")[1];
                    window.location.href="/faceb-cupt/tpl/center/users/"+loginid;
                });


            cancel_btn.on("click", function(e) {

                $.each(app.info, function(key, value) {

                    if (key == "sex") {
                        var sexg = $("input[name=sex]");
                        for (var i = 0, length = sexg.length; i < length; i++) {

                            if (sexg.eq(i).val() == value) {
                                sexg.eq(i).prop("checked", true)
                            } else {
                                sexg.eq(i).removeAttr('checked');
                            }
                        }

                    } else if (key == "sign") {
                        info_table.find("textarea").val(value);
                    } else {

                        $(".js-" + key).val(value);
                    }
                });
                info_table.find("input").addClass("disable");
                info_table.find("textarea").addClass('disable');

                $(".p-control").fadeOut(200);
            });
            $(".js-touxiang").click(function(e){
                var upload=$("#js-uploadtx");
                upload.click();
            });
            $("#js-uploadtx").change(function(e){
                var form=$(this).parents("form");
                form.submit();
            })


        },
        //重置表单

    }
    app.init();
    </script>
</body>

</html>
